/**
 * 大拇哥评论组件
 * @param {} props
 */
import React, { useMemo } from 'react';
import { Tooltip } from 'antd';
import PropTypes from 'prop-types';
import cn from 'classnames';
import styles from './index.module.less';

const TYPE = {
    LIKE: 'like',
    DISLIKE: 'dislike'
};

const ThumbComment = props => {
    const { comment, onClick, className, ...rests } = props;
    return (
        <Tooltip
            overlayClassName="tooltip"
            placement="top"
            title={
                comment?.desc.length > 0 ? (
                    <div>
                        {comment?.desc.map((item, i) => (
                            <div className="reason" key={item.createTime}>
                                {`【${item.employeeName}】`}
                                {item.evaluateType === 1 ? `推荐 ${item.updateTime}` : `不推荐 ${item.updateTime}`}
                                <br />
                                <div>{`理由：${item.recruitComment}`}</div>
                                {comment?.desc.length > 1 && comment?.desc.length - 1 !== i ? <br /> : null}
                            </div>
                        ))}
                    </div>
                ) : (
                    ''
                )
            }
        >
            <div className={cn(styles.box, className)} onClick={onClick}>
                <ThumbIcon {...rests}></ThumbIcon>
                <section className={styles.countWrapper}>
                    <span>{comment?.count || 0}</span>
                </section>
            </div>
        </Tooltip>
    );
};
const useIconColor = (type, disabled) => {
    const color = useMemo(() => {
        const defaultColor = '#FF9E00'; // 黄
        if (disabled) {
            return 'rgba(0, 0, 0, 0.25)'; // 置灰
        }
        if (type === TYPE.LIKE) {
            return defaultColor;
        }
        if (type === TYPE.DISLIKE) {
            return '#FF7760'; // 红
        }
        return defaultColor;
    }, [type, disabled]);
    return color;
};
const useIconClass = (type, disabled, visited) => {
    const theme = useMemo(() => {
        let classStr =
            type === 'like'
                ? 'iconlistfunction_otherslike_icon_default'
                : 'iconlistfunction_othersdislike_icon_default';
        if (visited || disabled) {
            // 实心
            classStr =
                type === 'like' ? 'iconlistfunction_melike_icon_default1' : 'iconlistfunction_medislike_icon_default1';
        }
        return cn(styles.cursor, 'icon', 'iconfont', classStr);
    }, [type, visited, disabled]);
    return theme;
};
/**
 * 图标逻辑
 * @param {} param0
 */
function ThumbIcon({ type, disabled, visited }) {
    const className = useIconClass(type, disabled, visited);
    const color = useIconColor(type, disabled);
    return <i className={className} style={{ fontSize: '18px', color }}></i>;
}
ThumbIcon.propTypes = {
    type: PropTypes.oneOf([TYPE.LIKE, TYPE.DISLIKE]),
    visited: PropTypes.bool,
    disabled: PropTypes.bool
};
ThumbIcon.defaultProps = {
    type: TYPE.LIKE,
    visited: false,
    disabled: false
};

export default ThumbComment;
